@list-height:35px;
@dot-size:10px;
@dot-margin:@list-height/2 - @dot-size;
.avatar-wrap{
    height: 60px;
    display: flex;
    align-items: center;
    color:rgb(251,217,217);
    span{
      margin-left: 10px;
    }
    &:hover{
      color: rgb(248,188,188);
    }
  }
.userpage{
    position: fixed;
    z-index: 12;
    top: 50px;
    width: 250px;
    border-radius: 4px;
    left: 55%;
    background-color: #fff;
    box-shadow:  rgba(244,244,244,0.5) 0 0 3px 2px;
    .data-page{
      text-align: center;
      div{
        width: 100%;
        margin-top: 20px;
        a{
          color: rgb(51,51,51);
          display: inline-block;
          width: 33%;
          text-align: center;
        }
      }
      .btn-qiandao{
        color: rgb(51,51,51);
        margin-top: 15px;
        display: inline-block;
        border-radius: 18px;
        border: 1px solid rgb(216,216,216);
        padding: 2px 15px;
        font-size: 16px;
      }
    }
    .list-container{
      border-top: 1px solid rgb(237,237,238);
      .list{
        height: @list-height;
        line-height: @list-height;
        vertical-align: middle;
        width: 100%;
        color: rgb(51,51,51);
        display: inline-block;
        margin: 5px 0;
        .reddot{
          margin-left: 5px;
          width: @dot-size;
          height:@dot-size;
          margin: @dot-margin 0;
          background-color:rgb(236,65,65);
          border-radius: 100%;
        }
        .list-left{
          display: inline-block;
          
        }
        .list-right{
          float: right;
        }
        &:hover{
          background-color: rgb(241,242,243);
        }
      }
    }
}
ul,li{
  list-style: none;
}